<template>
  <div class="dis-flex flex-dir-column flex-x-center flex-y-center">
    <div class="bargin-goods list padding-box">
      <div class="goods-list-box" v-for="(item,index) in goodsData.listitem ? goodsData.listitem : goodsData.data" :key="index" >
        <div class="goods-list dis-flex flex-dir-row flex-x-between flex-y-center border-line">
          <div class="img-logo">
            <!-- <div class="bargin-num">人团</div> -->
            <div class="goods-img img-center" v-bind:style="{'background-image':`url(${getPath('avatar.png')})`}"></div>
          </div>
          <div
            class="goods-info"
            style="width: 0;flex-grow: 1;"
          >
            <div class="title twolist-hidden">
              【玫瑰金 全网通智能 】15斤 鲜采玫瑰花束
            </div>
            <div class="desc">
              <div class="content">
                6945人砍价成功
              </div>
              <div
                class="dis-flex flex-dir-row flex-y-center f-24"
                style="margin: 10px 0 -10px;color:#9E9B9D;"
              >
                单买价<span class="col-3 f-24">￥120</span>
              </div>
              <div class="price dis-flex flex-dir-row flex-x-between">
                <span class="now f-24">可砍至: ￥120</span>
                <div class="go-bargin">去砍价</div>
              </div>
            </div>
          </div>
        </div>
        <div class="line-gap"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    goodsData() {
      return this.data
    },
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
@import "~@/components/CustormStyle/components/index.scss";
.padding-box.list {
  padding: 15px 15px 0 15px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 1.5px;
  background: #ffffff;
  margin-bottom: 4px;
}
.goods-list-box{
  &:not(:nth-last-child(1)){
    .line-gap {
      display: inline-block;
      width: calc(100% - 30px);
      margin: 15px 15px 9px;
      height: 1px;
      background: rgba(238, 238, 238, 1);
    }
  }
}
.bargin-goods.list {
  position: relative;
  width: 100%;
  z-index: 2;
  padding-bottom: 12px;
  .content {
    display: inline-block;
    padding: 0 7.5px;
    height: 15px;
    font-size: 10px;
    color: #fc5030;
    line-height: 15px;
    background: rgba(255, 236, 227, 1);
    border-radius: 7.5px;
  }
}

.bargin-goods .goods-list .img-logo {
  position: relative;
  font-size: 0;
}

.bargin-goods .goods-list .img-logo .goods-img {
  width: 100px;
  height: 100px;
  border-radius: 3px;
  margin-right: 14px;
}

.bargin-goods .goods-info .title {
  color: #000000;
  font-size: 14px;
  height: 40px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 2.5px;
}

.bargin-goods .now {
  color: #fe504f;
  align-self: flex-end;
}

.bargin-goods .goods-info .old {
  font-size: 12px;
  color: #333333;
}
.bargin-goods .goods-info .num {
  font-size: 12px;
  color: #999999;
  width: 63px;
  text-align: center;
  white-space: nowrap;
}
.bargin-goods .goods-info .go-bargin {
  width: 63px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  background: #fc5030;
  // box-shadow:0 2px 10px 0 rgba(254,80,79,0.54);
  border-radius: 25px;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
}
</style>
